<template>
   <div class="box">
      <el-select v-model="timeStr" @change="getTime" placeholder="请选择时间段" :style="`width:${width}`">
         <el-option v-for="item in timeList" :key="item.start_time + '-' + item.end_time"
            :label="item.start_time + '-' + item.end_time" :value="item.start_time + '-' + item.end_time" />
      </el-select>
   </div>
</template>

<script setup>
import api from "@/api/index.js";
const cgj = inject("cgj");
const timeList = ref([]);
const props = defineProps({
   width: { type: String, default: "240px" },
   shop_id: { type: [Number, String], default: 0 },
   defaultTime: { type: Object, default: {} },
});
let defaultTime = ref({});
const init = async () => {
   let res = await api.publicFun.getTimeList({ shop_id: props.shop_id });
   timeList.value = res.data;

   defaultTime.value = props.defaultTime;
};
onMounted(() => {
   init();
});
const emit = defineEmits(["change"]);
const getTime = (e) => {
   emit("change", e);
};

const timeStr = ref(""); // 当前选中的值

watch(
   () => defaultTime.value,
   (newVal) => {
      console.log(newVal);
      if (cgj.isNotNull(newVal.start_time)) {
         let obj = timeList.value.find((item) => item.start_time == newVal.start_time);
         timeStr.value = obj.start_time + "-" + obj.end_time;
      }
   },
   { deep: true }
);
</script>

<style lang="scss" scoped></style>
